<template>
    <div class="register">
        <div class="logo">
            <h1 class="logo_h">
                宠</h1>
            <div class="img">
                <img class="img_res1" src="../assets/images/7.png" alt="猫咪">
            </div>
            <h1 class="logo_h">爱</h1>
        </div>
        <div class="content">
            <h2>
                用户注册
            </h2>
            <form action="" class="form">
                <div class="input-text clearFix">
                    <span class="pwd">手机号:</span>
                    <input type="text" placeholder="请输入账号" v-model="useraccount" />
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">昵称:</span>
                    <input type="text" placeholder="请输入昵称" v-model="nikename" />
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">密码:</span>
                    <input type="text" placeholder="请输入密码" v-model="userpsw" />
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">确认密码:</span>
                    <input type="text" placeholder="请再次输入密码" v-model="userpsw1" />
                </div>
                <div class="input-text clearFix">
                    <span class="pwd">年龄:</span>
                    <input type="text" placeholder="请输入年龄" v-model="userage" />
                </div>
                <div class="setting clearFix">
                    <label class="checkbox inline">
                        <input class="check" type="checkbox" checked="" />
                        <span class="autlog">同意协议</span>
                    </label>
                </div>
            </form>
            <button class="btn_res" @click="register">
                注&nbsp;&nbsp;册
            </button>
            <!--  -->
            <div class="call clearFix">
                已有账号，
                <div class="link">
                    <router-link class="mylogin" to="/mylogin">立即登录</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios"


export default {
    data(){
        return{ 
          nikename:'',
          useraccount:'',
          userpsw:'',
          userpsw1:'',
          userage:'',
          Userinfo:[]
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
      register(){
		let p = {
			NikeName:this.nikename,
			UserAccount:this.useraccount,
			UserPsw:this.userpsw,
			UserPsw1:this.userpsw1,
			UserAge:this.userage,
		}
        
            for(let user in this.Userinfo){
                if(p.UserAccount==this.Userinfo[user].UserAccount){
                    this.$message({
                        type:'error',
                        message:'该账号已被注册'
                    })
                }
            }
        
         if(p.NikeName=='')
        {
            this.$message({
				type:'error',
				message:'请输入昵称'
			})
        }
        else if(p.UserAccount=='')
        {
            this.$message({
				type:'error',
				message:'请输入账号'
				
            })
        }
        else if(p.UserPsw=='')
        {
            this.$message({
				type:'error',
				message:'请输入密码'
			})
        }
        else if(p.UserPsw1=='')
        {
            this.$message({
				type:'error',
				message:'请输入密码'
			})
        }
        else if(p.UserAge=='')
        {
            this.$message({
				type:'error',
				message:'请输入年龄'
			})
        }
        else{
	        this.$axios.get('http://localhost:3000/api/register',{params:p}).then(res=>{
                console.log(res)
                if(res.data.code==1){
                    this.$message({
                        type:'success',
                        message:'注册成功'
                })
                    this.$router.push({path:'/mylogin'});
                }
                else{
                    this.$message.error(res.mes)
                }
            })
	    }
    },
    getList(){
        axios.get("http://localhost:3000/api/userinfo")
        .then(res =>{
                this.Userinfo = res.data;
                console.log(this.Userinfo);
            })
        }
	}
}
</script>
<style scoped>
    .register {
        width: 80%;
        margin: auto 10%;
        background-image: url('../assets/images/124.jpg');
        background-size: 100% 100%;
    }

    h2 {
        text-align: center;
    }

    form {
        margin-left: 8%;
    }

    .img_res1 {
        width: 70%;
        height: 130%;
        display: inline-block;
    }

    .call {
        margin-top: 4%;
    }

    .mylogin:hover {
        color: #4cb9fc;
        text-decoration: underline;
    }
    .pwd{
  font-size: 18px;
  line-height: 36px;
  font-family: 微软雅黑;
  float: left;
  width: 80px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 2px 0 0 2px;
  margin-left: 10%;
}
input {
  width: 270px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 22px;
  margin:auto 2% ;
  border-radius: 0 2px 2px 0;
  /* outline: none; */
}
.img_log1{
  width: 70%;
  height: 130%;
  display: inline-block;  
}
.img{
  width: 10%;
  height: 120%;
  line-height: 32px;
  display: inline-block;
}
.logo{
    text-align: center;
    font-family: 微软雅黑;
    width: 80%;
    height: 22px;
    margin-left: 10%;
    display: inline-block;
}
.logo_h{
  display: inline-block;
}
.input-text {
  margin:5% 18%;
}
.btn_res {
  background-color: #e1251b;
  padding: 6px;
  border-radius: 0;
  font-size: 16px;
  font-family: 微软雅黑;
  word-spacing: 4px;
  border: 1px solid #e1251b;
  color: #fff;
  width: 30%;
  height: 36px;
  margin-top: 25px;
  margin-left: 10%;
  outline: none;
}
.btn_res:hover{
  background-color: rgb(233, 175, 99);
}
.check {
  float: left;
  font-size: 30px;
  line-height: 30px;
  font-family: 微软雅黑;
  width: 20px;
}
.call {
  display: inline-block;
  margin-left: 74%;
}
.link{
  display: inline-block;
}
.mylogin {
  float: right;
  font-size: 20px;
}
.mylogin:hover {
  color: #4cb9fc;
  text-decoration: underline;
}
.autlog {
  float: left;
  font-size: 16px;
  line-height: 28px;
  font-family: 微软雅黑;
  margin-top: 3px;
}
.setting{
    margin-left: 10%;
}
@media screen and (max-width:768px){
            /* 手机屏幕 */
    .form{
        zoom:0.8
    }
    .call{
        margin: 0;
    }
    .input-text{
        margin-left: 1%;
    }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */

           
    }
</style>